<template>
  <div class="app-container">
    <!-- 条件搜索 -->
    <div class="filter-container">
      <el-form ref="queryForm" :model="listQuery.param" size="small" :inline="true" label-width="auto">
        <el-form-item label="流程定义" prop="procDefKey">
          <flow-proc-key v-model="listQuery.param.procDefKey" placeholder="流程定义" style="width: 100%;" class="filter-item" @change="handleFilterQuery" />
        </el-form-item>
        <el-form-item label="流程实例ID" prop="procInstId">
          <el-input v-model="listQuery.param.procInstId" placeholder="流程实例ID" class="filter-item" @keyup.enter.native="handleFilterQuery" />
        </el-form-item>
        <el-form-item label="流程定义ID" prop="procDefId">
          <el-input v-model="listQuery.param.procDefId" placeholder="流程定义ID" class="filter-item" @keyup.enter.native="handleFilterQuery" />
        </el-form-item>
        <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" style="margin-left: 10px;" @click="handleFilterQuery">
          搜索
        </el-button>
        <el-button v-waves class="filter-item" icon="el-icon-refresh-right" @click="handleRestQuery">
          重置
        </el-button>
      </el-form>
    </div>
    <div class="filter-container">
      <div style="float: right;">
        <el-button icon="el-icon-refresh" circle @click="handleFilterQuery" />
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      scrollbar-always-on="true"
    >
      <el-table-column type="selection" width="50px" align="center" />
      <el-table-column label="序号" type="index" width="50px" align="center" />
      <el-table-column label="流程名称" min-width="110px" align="left">
        <template v-slot="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="业务流水" min-width="110px" align="left">
        <template v-slot="{row}">
          <span>{{ row.bizKey }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务节点" min-width="110px" align="left">
        <template v-slot="{row}">
          <span>{{ row.taskName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务处理人" width="100px" align="left">
        <template v-slot="{row}">
          <span>{{ convertUser(row.assignee, users) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="160px" align="left">
        <template v-slot="{row}">
          <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="领取时间" width="160px" align="left">
        <template v-slot="{row}">
          <span>{{ row.claimTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="持续时间（s）" width="160px" align="left">
        <template v-slot="{row}">
          <span>{{ row.duration / 1000 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="流程实例" min-width="100px" align="left">
        <template v-slot="{row}">
          <span>{{ row.procInstId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="160px" class-name="small-padding fixed-width">
        <template v-slot="{row,$index}">
          <el-button size="mini" type="info" icon="el-icon-document" @click="handleDetail(row, $index)">详情</el-button>
          <el-button size="mini" type="primary" icon="el-icon-document-checked" @click="handleAudit(row, $index)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格分页 -->
    <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="handleInit" />

    <!-- 详情页面 -->
    <el-dialog title="详情" :visible.sync="visible" :close-on-click-modal="false" @close="handleClose">
      <el-tabs v-model="activeName" style="height: 450px;">
        <el-tab-pane label="流程信息" name="first">
          <instance-diagram :param="procInstId" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { handleGetIncompleteTaskPageList } from '@/views/flow/api/task'
import { handleGetAllUserList } from '@/views/sys/userInfo/api'
import { handleDetail } from '@/views/flow/api/task'
import { convertUser } from '@/utils'
import permission from '@/directive/permission/index' // 权限判断指令
// import checkPermission from '@/utils/permission' // 权限判断函数
import waves from '@/directive/waves' // waves directive
// import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import InstanceDiagram from '@/views/flow/components/InstDiagram/index.vue'
import FlowProcKey from '@/views/flow/components/ProcessKey/index.vue'

export default {
  // 当前页面名称（组件）
  name: 'TaskIncomplete',
  // 引用组件
  components: { FlowProcKey, Pagination, InstanceDiagram },
  directives: { permission, waves },
  filters: {},
  data() {
    return {
      // 列表table的key
      tableKey: 0,
      // 遮罩层
      loading: true,
      // table数据对象
      list: [],
      // 总条数
      total: 0,
      // table条件查询对象
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        // sort: '+id',
        param: {
          procDefKey: undefined,
          procInstId: undefined,
          bizKey: undefined,
          assignee: this.$store.getters.userInfo.userId
        }
      },
      // 表单数据对象
      formData: {},
      // 是否显示弹出层
      visible: false,
      // 弹出层状态值（新增和修改共用同一个表单页面）
      state: '',
      // 弹出层标题
      title: {},
      // 权限标识
      permission: {
        audit: ['wb:incomplete:audit']
      },
      // 表单校验规则
      rules: {},
      activeName: 'first',
      procInstId: undefined,
      users: [],
      defKeys: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.handleInit()
    handleGetAllUserList().then(res => {
      this.users = res.data
    })
  },
  mounted() {},
  methods: {
    convertUser,
    // 查询table数据对象
    handleInit() {
      this.loading = true
      handleGetIncompleteTaskPageList(this.listQuery).then(res => {
        this.list = res.data
        if (res.total) {
          this.total = Number(res.total)
        }
        this.loading = false
      })
    },
    // 条件查询table数据
    handleFilterQuery() {
      this.listQuery.pageNum = 1
      this.handleInit()
    },
    // 重置table查询条件
    handleRestQuery() {
      this.$refs.queryForm.resetFields()
    },
    // 详情
    handleDetail(row) {
      // this.procInstId = row.procInstId
      // this.visible = true
      const { bizKey, procInstId } = row
      handleDetail({ processInstId: procInstId, assignee: this.$store.getters.userInfo.userId }).then(res => {
        if (res.data.formKey) {
          // 携带参数跳转，因为动态路由也是传递params的，所以在 this.$router.push() 方法中 path是不能和params一起使用的，否则params将无效。需要用name来指定页面
          this.$router.push({ name: res.data.formKey, query: { appNo: bizKey, procInstId: procInstId, from: this.$route.name }})
        } else {
          this.$router.push({ name: 'Review', query: { appNo: bizKey, procInstId: procInstId, from: this.$route.name }})
        }
      })
    },
    // 审批
    handleAudit(row) {
      const { bizKey, procInstId } = row
      handleDetail({ processInstId: procInstId, assignee: this.$store.getters.userInfo.userId }).then(res => {
        if (res.data.formKey) {
          // 携带参数跳转，因为动态路由也是传递params的，所以在 this.$router.push() 方法中 path是不能和params一起使用的，否则params将无效。需要用name来指定页面
          this.$router.push({ name: res.data.formKey, query: { appNo: bizKey, procInstId: procInstId, from: this.$route.name }})
        }
      })
      // const obj = {}
      // obj.taskId = row.taskId
      // obj.taskStatus = 'A'
      // obj.comment = '同意'
      // handleComplete(obj).then((res) => {
      //   //  刷新table
      //   this.handleFilterQuery()
      //   this.$message({
      //     showClose: true,
      //     message: res.msg,
      //     type: 'success',
      //     duration: 4000
      //   })
      // })
    },
    // 关闭弹出层
    handleClose() {
      this.visible = false
    }
  }
}
</script>
